<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>mg</title>
    <style>

        .container{
            width: 500px;
            height: 500px;
            bor der:1px solid red;
        margin:200px auto;
        perspective: 30000000px;}
       .box{
           width: 300px;
           height: 300px;
           bor der:1px solid red;
           transform-style: preserve-3d;
           transform:rotateX(45deg) rotateY(45deg);
           animation: mofang 50s linear infinite;
       }
       .pic{
           width: 300px;
           height:300px;

       }
        .page{
            width: 300px;
            height:300px;
            border:1px solid #d1d7db;
            position: absolute;
        }
        .page_top{
            background: #fcc2ff;
            transform: translateZ(150px);
            
        }
        .page_bottom{
            background: #fcc2ff;
            transform: translateZ(-150px);
        }
        .page_after{
            background: #a3cedb;
            transform: translateY(150px) rotateX(90deg);
        }
        .page_before{
            background: #a3cedb;
            transform: translateY(-150px) rotateX(90deg);
        }
        .page_left{
            background: #fff893;
            transform: translateX(-150px) rotateY(90deg);
        }
        .page_right{
            background: #fff893;
            transform: translateX(150px) rotateY(90deg);
        }
        @keyframes mofang {
            0%{
                transform: rotateX(45deg) rotateY(45deg);

            }
            30%{transform: rotateX(150deg) rotateY(150deg);}
            100%{transform: rotateX(370deg) rotateY(370deg);}
        }
    </style>
</head>
<body>
<div class="container">
    <div class="box">
        <div class="page page_top"><img src="../img/cn.jpg" class="pic"/></div>
        <div class="page page_bottom"><img src="../img/cn2.jpeg" class="pic"/></div>
        <div class="page page_left"><img src="../img/cn3.jpeg" class="pic"/></div>
        <div class="page page_right"><img src="../img/cn02.jpeg" class="pic"/></div>
        <div class="page page_before"><img src="../img/cn01.jpeg" class="pic"/></div>
        <div class="page page_after"><img src="../img/cn03.jpeg" class="pic"/></div>
    </div>

</div>

</body>
</html>